<template>
  <div class="List " :style="{width:$store.state.screenWidth+'px'}">
  <el-row style="margin-top:50px ;margin-left: 15px;" class="search">
    <el-col :span="2"><b>搜索内容</b></el-col>
    <el-col :span="5">
  
  <el-input v-model="keyVal" placeholder="请输入搜索关键字"  style="" />
  
    </el-col>
        <el-col :span="2" style="margin-left: -25px;"><b style="margin-right: -30px;">类别</b></el-col>
    <el-col :span="3">
      <el-select v-model="selectVal" class="m-2"  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
    </el-col>
    <el-col :span="3"><el-button type="primary" style="width: 100px;" @click="search">搜索</el-button></el-col>
  </el-row>
    <el-row :gutter="30" style="margin-top: 15px;">
      <el-col :span="15">
       <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/' }">列表页 </el-breadcrumb-item >

      </el-breadcrumb>
        <b>搜索结果</b>
      </div>
    </template>
    <ul class="ul1" v-if="tableName==='News'">
      <li v-for="el in arr" :key="el.id">
        <router-link :to="detailName + el.id">
        <section>
          
          <h4 v-text="el.title"></h4>
          <div class="bbox">
          <div class="box">
          <p v-text="el.param"></p>
          <div class="num">
            <span><el-icon ><Timer /></el-icon>{{el.date}}</span>
            <span><el-icon style="vertical-align: middle;"><View /></el-icon>200</span>
          </div>
          </div>
           <aside>
          <img :src="el.src" alt="" >
        </aside>
        </div>
        </section>
       
        </router-link>
      </li>
    </ul>
      <ul class="ul2" v-else>
      <li v-for="el in arr" :key="el.id">
        <router-link :to="'/detailNotice/'+el.id">
        <section>
          
          <h4 v-text="el.title"></h4>
          <div class="bbox">
          <div class="box">
          <p v-text="el.param"></p>
          <div class="num">
            <span><el-icon ><Timer /></el-icon>{{el.date}}</span>
            <span><el-icon style="vertical-align: middle;"><View /></el-icon>200</span>
          </div>
          </div>
          
        </div>
        </section>
       
        </router-link>
      </li>
    </ul>
    <div style="margin: 0 auto;">
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="changePage"  />
    </div>
  </el-card>
      </el-col>
      <el-col :span="9" class="bar">
    <BarVue></BarVue>
    </el-col>
    </el-row>
  </div>
</template>
<script>
import BarVue from '@/components/Bar.vue';


export default{
    name: "SearchCom",
    data() {
        return {
           
            curPage: 0,
            arr: [],
            total: 0,
            detailName:"",
            options:[
              {value:'headlines',label:'头条关注'},
              {value:'comprehensive',label:'综合新闻'},
              {value:'learning',label:'学术动态'},
              {value:'story',label:'师大故事'},
              {value:'images',label:'图片新闻'},
              {value:'video',label:'视频新闻'},
              {value:'newest',label:'最新新闻'},
              {value:'newhot',label:'最热新闻'},
              {value:'notice',label:'通知公告'},
            ],
            selectVal:'---请选择---',
            keyVal:'',
            tableName:''
        };
    },
    components:{
        BarVue
    },
  
    mounted() {
      
   
    },
    methods: {
        search(){ 
          let tableName='News';
          this.detailName='/detail/'+this.selectVal+'/';
          switch(this.selectVal){
            case 'video':
              tableName='Video';
             this.detailName='/detailVid/'
              break;
            case 'images':
              tableName='Images';
              this.detailName='/detailImg/'
              break;
            case 'notice':
              tableName='Notice';
              this.detailName='/detailNotice/'
              break;
          }
          this.tableName=tableName;
          this.subPage()

            //分页
             const params = {
            type:this.selectVal,
            tableName,
            keyword:this.keyVal,
        };
        this.$axios.get("getSearchTotal", { params }).then(rs => {
            this.total = rs;
        });
        },
        changePage(num){
            this.curPage = num - 1;
            this.subPage();
        },
        subPage(){
           
                 //    const newType = req.query.type;
        // const start = req.query.start;
        // const tableName = req.query.tableName;
        // const keyword = req.query.keyword;包装后端路由
          const params={
            type:this.selectVal,
            start:this.curPage*4,
            tableName:this.tableName,
            keyword:this.keyVal

          }
      
          this.$axios.get('getSearchMsg',{params}).then(rs=>{
              if(this.selectVal==="video" || this.selectVal==="images"){
                  this.arr = rs.map((el) => {
                      let obj = {};
                    obj.param = el.content;   
                    obj.src = (this.selectVal==="video")?this.$store.state.URL+"video/"+el.src:this.$store.state.URL+"photoes/"+el.src;
                    obj.date = new Date(el.updatedAt).toLocaleDateString();
                    obj.title = el.title;
                    obj.id = el.id;
                    return obj;
                });
                }
                else if(this.selectVal==="notice"){
                     this.arr = rs.map((el) => {
                     let obj = {};
                  obj.param = el.content;   
                    obj.date = new Date(el.updatedAt).toLocaleDateString();
                    obj.title = el.title;
                    obj.id = el.id;
                   
                    return obj;
                });
                }
             else{
               this.arr = rs.map((el) => {
                  let obj = {};
                   obj.param = el.content.match(/<p>[^>]+>/)[0].replace(/<p>|<\/p>/g, "");
                    let src = el.content.match(/src="[^"]+"/)[0];
                    obj.src = src.substring(5, src.length - 1);
                    obj.date = new Date(el.updatedAt).toLocaleDateString();
                    obj.title = el.title;
                    obj.id = el.id;
                   
                    return obj;
                });  
            }
          });

             
     
        }
    },
      watch:{
      $route(){
        this.listType=this.$route.path.substr(6)
        this.subPage();
      }
    }
   
}


</script>
<style scoped lang="less">
.List{
  .search{
    .el-col{
      text-align: center;
      height: 40px;
      line-height: 40px;
    }
  }

   margin:170px  auto 100px;
  .el-row{
   .el-col{
    .el-card{
      ul{
        list-style: none;
        padding: 0;
       
        li{
           padding-bottom: 10px;
          a,a:visited{
            
            text-decoration: none;
           
            
            section{
               h4{
                color: #00a4df;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                word-break: break-all;
               
                overflow: hidden;
                &:hover{
                  color: black;
                }
              }
              .bbox{
                display: flex;

                .box{
                  flex:5;
                  margin-top: -10px;
                  margin-right: 20px;
                  .num{
                color: rgb(82, 92, 89);
                font-size: 13px;
                span{
                  margin-right: 10px;
                }
              }
             
              p{
                font-size: 14px;
                line-height: 1.45;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 5;
                word-break: break-all;
                overflow: hidden;
                text-indent: 2em;
                color: black;
                &:hover{
                  color: rgb(71, 89, 141);
                }
              }
            }   
                aside{
             flex: 3;
              height: 140px;
              display: flex;
              justify-items: center;
              
              
              img{
             
                width: 100%;
                height: 100%;
              }

            }
                }
              }
              
           
          }
        }
      }
      .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
    
  
}
    }
   }
  }
}
</style>

